
import Icon from '@ant-design/icons';
import * as THREE from 'three';
import { Button, List } from "antd";
import React from "react";
import styles from '../../index.module.less';
import { ReactComponent as CubeSvg } from './cube.svg';
import Controller from 'Controller'

export default function MeshBoxGeometry() {

    const threeController = Controller.instance.useMemo(s => s.threeController, [])

    const onClick = React.useCallback(() => {
        let mesh = new THREE.Mesh(
            new THREE.BoxBufferGeometry(),
            new THREE.MeshPhongMaterial({ color: 0x44aa88, shininess: 150 })
        );
        // mesh.material.map = new THREE.TextureLoader().load("./texture/image/00000000A0F7.jpg");
        mesh.name = '多边形-' + mesh.uuid;
        threeController.sceneAdd(mesh);
    }, [threeController])

    return (
        <List.Item actions={[<Button type="link" onClick={onClick} >添加</Button>]}>
            <span className={styles.icon} >
                <Icon component={CubeSvg} />
            </span>
            多边形
        </List.Item>
    )
}


     // cube.castShadow = true;
        // cube.receiveShadow = true;
        // cube.position.y = 0;
        // cube.position.x = 0;